<script>
  import Student from  "./components/Student"
  import School from "./components/School"
  export default {
    name: "App" ,
    data(){
      return{
        msg:'欢迎学习前端技术'
      }
    },
    components: {
      Student,
      School
    },
    methods:{
      showDOM(){
        // 使用rel属性定位元素DOM结点
        console.log(this.$refs.h1_msg)
      },
      changeDOM(){
        this.$refs.h1_msg.innerHTML='我被修改啦'
      }
    }
  }
</script>

<template>
  <div>
    <h1 ref="h1_msg" v-text="msg"></h1>
    <button @click="showDOM">点击</button>
    <button @click="changeDOM">点击修改msg</button>
    <Student></Student>
<!--    调用组件时需要传入组件定义的props参数,如果不传入参数则{{xxx}}则不显示 属性前面加:表示绑定为number类型-->
    <School position="广东潮州" :score='521'>
    </School>
  </div>
</template>
